<template>
  <div class="data-text">
    <el-input
      :rows="8"
      placeholder="请输入内容"
      v-model="text"
      @change="syncValue"
      type="textarea"
      clearable>
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default () {
        return ''
      }
    }
  },

  model: {
    prop: 'value'
  },

  data () {
    return {
      text: ''
    }
  },

  watch: {
    value: {
      deep: true,
      handler () {
        this.refresh()
      }
    }
  },

  mounted () {
    this.refresh()
  },

  methods: {
    refresh () {
      this.text = this.value
    },
    syncValue () {
      this.value = this.text
    }
  }
}
</script>

<style lang="less" scoped>

</style>